<template>
    <div>
        <div id="bbb" style="padding: 20px">
            <p v-if="homeworkList.length <=2">还没发布作业</p>
            <el-button v-if="homeworkList.length >=2" type="success" class="filter-item" icon="el-icon-edit" style="margin-bottom: 20px"
                       @click="exportExcel">导出表格
            </el-button>
            <el-table v-if="homeworkList.length >=2" border :max-height="height" :data="studentsList"
                      style="width: 100%;" id="table" :summary-method="getSummaries"
                      show-summary :row-style="getRowClass">
                <!-- prop='属性名' label='网页展示的标签' -->
                <el-table-column fixed width="150" prop="studentName" align="center" label="学生姓名"></el-table-column>
                <el-table-column align="center" width="this.clientWidth/4" v-for="(item,index) in homeworkList"
                                 :key="index" :label="item.name">
                    <template slot-scope="scope">
                        <p v-for="i in scope.row.studentsList" :key="i.id">
                            <span v-if="i[index] == true">√</span>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" align="center" label="汇总" prop="studentsList.total"
                                 width="150"></el-table-column>
                <el-table-column fixed="right" align="center" label="平时成绩" prop="studentsList.mark"
                                 width="100"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import FileSaver from "file-saver"
    import XLSX from "xlsx"

    export default {
        name: "List",
        data() {
            return {
                clientWidth: 0,
                height: window.innerHeight - 100,
                homeworkList: [],
                studentsList: [],
                course: 0,
                clazz: 0
            };
        },
        components: {},
        methods: {
            pageHandler() {
                //使用 axios 调用后台接口
                var url =
                    "/api/homework?clazzId=" + this.$store.state.clazzId + "&courseId=" + this.$store.state.courseId
                axios
                    .get(url)
                    .then(res => {
                        this.homeworkList = res.data[0].homework;
                        this.studentsList = res.data[0].student;
                    })
                    .catch(err => {
                        console.log("error");
                    });
            },
            //定义导出Excel表格事件
            exportExcel() {
                /* generate workbook object from table */
                let fix = document.querySelector('.el-table__fixed');
                let wb;
                if (fix) { //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
                    wb = XLSX.utils.table_to_book(document.querySelector('#table').removeChild(fix));
                    document.querySelector('#table').appendChild(fix);
                } else {
                    wb = XLSX.utils.table_to_book(document.querySelector('#table'));
                }
                let wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
                try {
                    FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '作业上交情况.xlsx')
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout)
                }
                return wbout;
            },
          //页脚处理
            getSummaries(param) {
                let i;
              const sums = [];
                //页脚第一个内容
                sums[0] = "总计";
                //根据作业数量添加到对应的页脚处
                for (i = 0; i < this.homeworkList.length; i++) {
                    sums[i + 1] = Math.round(Number(this.homeworkList[i].nums) / this.studentsList.length * 100) + "%";
                }
                let total = 0;
                let avgMark = 0;
                for (i = 0; i < this.studentsList.length; i++) {
                    total += Number(this.studentsList[i].studentsList.total);
                    avgMark += Number(this.studentsList[i].studentsList.mark);
                }
                sums[this.homeworkList.length + 1] = "平均上交数量：" + Math.round(total / this.studentsList.length);
                sums[this.homeworkList.length + 2] = "平均分：" + Math.round(avgMark / this.studentsList.length);
                return sums;
            },
            getRowClass({row, rowIndex}) {
                //没有成绩高亮红色
                if (Number(row.studentsList.mark) == 0 && rowIndex != null) {
                    return 'background:#FA8072;height:80px'
                  //成绩大于80高亮绿色
                } else if (Number(row.studentsList.mark) >= 80 && rowIndex != null) {
                    return 'background:#98FB98;height:80px'
                } else {
                    return 'height:80px'
                }
            }
        },
        created() {
            //created  表示页面加载完毕，立即执行
            this.pageHandler();
        }
    };
</script>

<style lang="scss" scoped>
    .el-table .warning-row {
        background: #f7faff;
    }

    .el-table .success-row {
        background: #ebf1fb;
    }

    #bbb {
        width: 100%;
        height: 1000px;
        background-color: rgb(255, 255, 255);
        position: absolute;
        overflow: scroll;
        top: 0px;
        z-index: 101;
    }
</style>
